<template>
  <view class="page">
    <view class="filter">
      <view class="titleArea">
        <view class="title">自定义筛选条件</view>
        <view class="toChangeStock" @click="toChangeStock">
          去一键换仓
          <u-icon name="arrow-right" color="#e3e3e3"></u-icon>
        </view>
      </view>

      <view class="filterItem">
        <view class="label">现价≤ :</view>
        <u-input v-model.number="queryInfo.tprice" input-align="right" class="formItem"></u-input>
        <view class="unit">元</view>
      </view>
      <view class="filterItem">
        <view class="label">剩余规模≤ :</view>
        <u-input v-model.number="queryInfo.curr_iss_amt" input-align="right" class="formItem"></u-input>
        <view class="unit">亿元</view>
      </view>
      <view class="filterItem">
        <view class="label">溢价率≤ :</view>
        <u-input v-model.number="queryInfo.premium_rt" input-align="right" class="formItem"></u-input>
        <view class="unit">%</view>
      </view>
      <view class="buttonArea">
        <u-button :custom-style="btnStyle" @click="getTableListReq" :hair-line="false">筛选</u-button>
      </view>
    </view>

    <view class="list">
      <view class="row table-head">
        <view class="nameArea col">转债</view>
        <view class="priceArea col">现价/涨幅</view>
        <view class="convert_value col">转股价值</view>
        <view class="premium_rt col">溢价率</view>
        <view class="doubleLow">双低</view>
      </view>
      <view
        class="row"
        v-for="(item, index) in tableList"
        :key="index"
        :class="{ hasStock: item.hasStock, needChange: item.hasStock && index > 10 }"
      >
        <view class="nameArea col">
          <view class="name">{{ item.bond_nm.replace('转债', '') }}</view>
          <view class="code">{{ item.bond_id }}</view>
        </view>
        <view class="priceArea col" :style="[priceAreaStyle(item.increase_rt)]">
          <view class="price">{{ item.full_price }}</view>
          <view class="rate">{{ item.increase_rt }}</view>
        </view>
        <view class="convert_value col">{{ item.convert_value }}</view>
        <view class="premium_rt col">{{ item.premium_rt }}</view>
        <view class="doubleLow">{{ item.dblow }}</view>
      </view>
    </view>

    <ExplainDetail />

    <view class="bottom"></view>
  </view>
</template>

<script>
import { buttonStyle } from '@/common/style';

import { getDbLow } from './index';

import ExplainDetail from '@/components/ExplainDetail';

export default {
  components: {
    ExplainDetail
  },

  data() {
    return {
      queryInfo: {
        tprice: 130, // 现价低于这个值
        premium_rt: 10, // 溢价率
        curr_iss_amt: 10 // 剩余规模小于
      },
      tableList: []
    };
  },

  computed: {
    btnStyle() {
      return buttonStyle();
    },

    priceAreaStyle() {
      return increaseRatio => {
        const value = increaseRatio.replace('%', '');
        if (value > 0) {
          return {
            color: ' #ff9f96'
          };
        }
        if (value < 0) {
          return {
            color: '#5ec3da'
          };
        }
        return {};
      };
    }
  },

  onShow() {
    this.getTableListReq();
  },

  methods: {
    toChangeStock() {
      uni.navigateTo({
        url: '/pages/stock/changeStock/index'
      });
    },

    getTableListReq() {
      getDbLow(this.queryInfo)
        .then(res => {
          this.tableList = res.data;
        })
        .catch(err => {
          console.log(err, 'err');
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    }
  },

  onPullDownRefresh() {
    this.getTableListReq();
  }
};
</script>

<style lang="scss" scoped>
@import url(~@/common/style.css);
.page {
  height: 100vh;
  background: #fff;
}

.filter {
  padding: 25rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  width: 686rpx;
  background: #ffffff;
  box-shadow: 0px 0px 20rpx 1rpx rgba(37, 84, 181, 0.07999999821186066);
  border-radius: 28rpx;
  .titleArea {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-weight: 700;
    }
  }
  .toChangeStock {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #213d5b;
  }

  .filterItem {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .label {
      margin-right: auto;
    }
    .unit {
      margin-left: 30rpx;
      color: #b1b4bd;
    }
  }

  .buttonArea {
    margin-top: 20rpx;
  }
}

.list {
  margin: 0 auto;
  margin-top: 30rpx;
  width: 686rpx;
  padding: 25rpx;
  box-shadow: 0px 0px 20rpx 1rpx rgba(37, 84, 181, 0.07999999821186066);
  border-radius: 28rpx;
}
</style>